<template>
  <div class="my" @touchstart="handleTouchstart" @touchend="handleTouchend">
    <div class="my-container">
      <van-nav-bar
        title="我的"
        left-arrow
        :safe-area-inset-top="true"
        @click-left="onClickLeft"
      />
      <div class="info">
        
        <div class="content">
          <span class="name">{{ userInfo.name }}</span>
          <span class="identify">职位：{{ identify[userInfo.type] }}</span>
          <span class="phone">工号：{{ userInfo.number }}</span>
        </div>
        <div class="head">
          <img src="../../assets/image/head.png" alt="" />
        </div>
      </div>
    </div>
    <div class="operation">
        <div
          class="item"
          v-for="(item, index) in itemData"
          :key="item.id"
          @click="itemClickHandle(item, index)"
        >
          <span class="left-icon"><van-icon :name="item.leftIcon" /></span>
          <span class="title">{{ item.title }}</span>
          <span class="right-icon"><van-icon name="arrow" /></span>
        </div>
      </div>
  </div>
</template>

<script>
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { Notify } from 'vant'
import { identify, faceTitle } from '@/enum.js'
export default {
  name: 'my',
  setup() {
    const store = useStore()
    const router = useRouter()

    // 操作部分 item 数据
    const itemData = [
      {
        id: 0,
        title: faceTitle[0],
        leftIcon: 'smile-o',
      },
      // {
      //   id: 1,
      //   title: faceTitle[1],
      //   leftIcon: 'smile-o',
      // },
      {
        id: 1,
        title: '编辑资料',
        leftIcon: 'edit',
      },
      {
        id: 2,
        title: '修改密码',
        leftIcon: 'closed-eye',
      },
      {
        id: 3,
        title: '退出登入',
        leftIcon: 'revoke',
      },
    ]

    const userInfo = computed(() => store.state.user.userInfo)

    // 点击返回按钮处理函数
    const onClickLeft = () => router.back()

    // item 点击处理函数
    function itemClickHandle(item, index) {
      switch (index) {
        case 0:
          router.push({ path: '/face', query: { id: 0 } })
          break
        // case 1:
        //   router.push({ path: '/face', query: { id: 1 } })
        //   break
        case 1:
          router.push('/editinfo')
          break
        case 2:
          router.push('/updatepassword')
          break
        case 3:
          logoutHandle()
          break
      }
    }

    // 退出登入处理函数
    function logoutHandle() {
      store
        .dispatch('LogOut')
        .then(() => {
          router.push('/login')
        })
        .catch((err) => {
          console.log(err, 'err')
          Notify({ type: 'danger', message: err })
        })
    }

    let touchPosition = ref(0)

    function handleTouchstart(e) {
      touchPosition.value = e.changedTouches[0].clientX
    }

    function handleTouchend(e) {
      const leavePosition = e.changedTouches[0].clientX

      if ((leavePosition - touchPosition.value) >= 60) {
          return
      } else if ((leavePosition - touchPosition.value) <= -60) {
        router.push("/home")
      }
    }

    return {
      userInfo,
      identify,
      onClickLeft,
      logoutHandle,
      itemData,
      itemClickHandle,
      handleTouchstart,
      handleTouchend
    }
  },
}
</script>

<style lang="scss" scoped>
.my {
  height: 100%;
  background-color: var(--my-background-color);
  .my-container {
    width: 100%;
    min-height: 12rem;
    background-color: var(--my-cotainer-background-color);
    display: flex;
    flex-direction: column;
    // background: linear-gradient(to right, #e0eafc, #cfdef3);

    
    // .van-nav-bar {
    //   background-color: transparent !important;
    // }
    // [class*=van-hairline]:after {
    //   border: none !important;
    // }
    
    .info {
      width: 100%;
      height: 12rem;
      // background-color: #fff;
      box-sizing: border-box;
      padding: 2rem;
      display: flex;
      align-items: center;

      .head {
        width: 6rem;
        height: 6rem;
        border: 0.4rem solid #FFF;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0.08rem 0.08rem 0.8rem #CCC,
                    0.09rem 0.09rem 0.9rem #CCC,
                    0.1rem 0.1rem 1rem #EEE;
        img {
          width: 90%;
          height: 90%;
          // border-radius: 50%;

        }
      }
      .content {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .name {
          font-size: 2.5rem;
          font-weight: 500;
          margin-bottom: 1rem;
        }
        .identify {
          color: var(--global-second-text-color);
        }
        .phone {
          margin-top: 1rem;
          color: var(--global-second-text-color);
        }
      }
    }
    
  }
  .operation {
      height: 100%;
      margin-top: 1rem;
      background-color: var(--my-cotainer-background-color);
      box-sizing: border-box;
      padding: 0 2rem;

      .item {
        width: 100%;
        height: 5rem;
        line-height: 5rem;
        font-size: 1.5rem;
        border-bottom: 1px solid #eee;
        display: flex;

        &:active {
          background-color: var(--gray-color4);
          transition: var(--active-transition);
        }

        .left-icon {
          margin-right: 1rem;

          // .van-icon {
          //   color: #456bfb;
          // }
        }
        .title {
          margin-right: 1rem;
          flex: 1;
        }
      }
    }
}

@media screen and (min-width: 700px) {
  .my {

      overflow: auto;
  }
}
</style>